<!--
*@Author: QWP
*@Description: 添加日程
*@Date: 2024-07-30 15:22:57
-->
<template>
  <u-dialog
    v-bind="$attrs"
    :confirmLoading="loading"
    destroyOnClose
    title="日程编辑"
    @submit="submit"
    @close="dilaogClose">
    <a-layout
      class="f-h-100"
      style="background: #fff">
      <a-layout-content style="overflow: auto; padding: 16px">
        <a-card
          :title="'日程'">
          <u-form
            :elements="formEl"
            :model="form"
            :loading="loading">
          </u-form>
        </a-card>
        <a-card
          title="附件"
          class="f-margin-t16">
          <u-form
            :elements="formUploadEl"
            :model="uploadForm"
            :loading="loading"></u-form>
        </a-card>
      </a-layout-content>
    </a-layout>
    <template #footerCenter>
      <u-icon-button
        itype="delete"
        v-if="id"
        @click="deleteSchedule">
        删除
      </u-icon-button>
    </template>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, useAttrs, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs, { Dayjs } from "dayjs";
import { _IFormEl, _IExtra } from "@/src/components/common/form/interface";
import { FormInstance, FormItemProps } from "ant-design-vue";
import { alertC, messageC } from "@/util/common";
import * as calendarApi from "@/service/assist/calendar";
import { cloneDeep } from "lodash";

const props = defineProps<{
  id?: string;
  date?: Dayjs | string;
}>();

const arrts = useAttrs();

const nowDate = ref<Dayjs>(dayjs());
const emits = defineEmits(["success"]);
const formRef = ref<FormInstance>();

const form = ref({
  scheduledate: dayjs().format("YYYY-MM-DD"),
});
const loading = ref<boolean>(false);
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: "80px",
  colon: false,
};
const formEl: Array<_IFormEl> = [
  {
    label: "日程日期",
    key: "scheduledate",
    col: { span: 8 },
    element: "datepicker",
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: "开始时间",
    key: "starttime",
    col: { span: 8 },
    element: "timepicker",
    formItemProps: { ...formItemProps, required: true },
    componentProps: { format: "HH:mm", valueFormat: "HH:mm" },
  },
  {
    label: "截止时间",
    key: "endtime",
    col: { span: 8 },
    element: "timepicker",
    formItemProps: { ...formItemProps, required: true },
    componentProps: { format: "HH:mm", valueFormat: "HH:mm" },
  },
  {
    label: "主题",
    key: "theme",
    col: { span: 24 },
    element: "input",
    formItemProps: { ...formItemProps, required: true },
  },
  {
    label: "内容",
    key: "content",
    col: { span: 24 },
    element: "textarea",
    formItemProps: { ...formItemProps, required: true },
  },
];

const uploadForm = ref<any>({});
const formUploadEl: Array<_IFormEl> = [
  {
    label: "",
    key: "appendixSaveVOList",
    col: { span: 24 },
    element: "file",
    formItemProps: { ...formItemProps },
    componentProps: {
      fileParams: { biztype: "1", bucket: "ADM_BIZ_TYPE_SCHEDULE" },
    },
  },
];

// 保存
const submit = () => {
  const tForm = cloneDeep(form.value);
  tForm.scheduledate = tForm.scheduledate.toString();

  tForm.starttime = tForm.starttime.toString();
  tForm.endtime = tForm.endtime.toString();
  let url = props.id ? "update" : "add";
  calendarApi[url]({ ...tForm, ...uploadForm.value }).then((res) => {
    if (res.code == 0) {
      dilaogClose();
      emits("success");
      messageC(res.msg, "success");
    } else {
      messageC(res.msg, "error");
    }
  });
};

// 回显
const echoInfo = () => {
  loading.value = true;
  calendarApi
    .query1(props.id)
    .then((res) => {
      loading.value = false;
      if (res.code == 0) {
        form.value = res.data || [];
        nowDate.value = dayjs(form.value.scheduledate || "");

        uploadForm.value.appendixSaveVOList = res.data["appendix"] || [];
      }
    })
    .catch(() => (loading.value = false));
};

// 删除日程
const deleteSchedule = async () => {
  try {
    await alertC("确认删除？", "confirm");
    loading.value = true;
    const res = await calendarApi.del({ ids: props.id });
    if (res.code == 0) {
      dilaogClose();
      emits("success");
      messageC(res.msg, "success");
    } else {
      messageC(res.msg, "error");
    }
  } catch (error) {}
  loading.value = false;
};

const dilaogClose = () => {
  form.value = {};
  uploadForm.value = {};
};

watch(
  () => arrts.open,
  (nval, oval) => {
    if (props.date) {
      nowDate.value = dayjs(props.date);
      form.value.scheduledate = dayjs(props.date).format("YYYY-MM-DD");
    } else {
      form.value.scheduledate = dayjs().format("YYYY-MM-DD");
    }
    if (nval == true && props.id) {
      echoInfo();
    }
  }
);
</script>

<style lang="scss">
.u-top-schedule-title {
  font-size: var(--font-size-level-2);
  font-weight: 600;

  .ant-picker-input {
    input {
      font-size: var(--font-size-level-2) !important;
      font-weight: 600;
    }
  }
}
</style>
